<html
    window-frame="extended"
    window-resizable="true"
    window-width="750dip"
    window-height="1024dip"
    window-state="maximized"
    window-icon="images/seastar.svg"
    window-blurbehind="light"
    theme="light">
<head>
<title>sciter demo</title>
<style>

@import url(node_modules/sciter-logger/src/logger.css);
@import url(css/controls.css);
@import url(css/window.css);

.hbox {
    margin-right: 1em;
    flow: horizontal;
    border-spacing: 0.5em;
    vertical-align: middle;
}

plaintext#logger {
    height: 10%;
}

</style>
<script type="module">

import Logger from "node_modules/sciter-logger/src/logger.js";
import * as Utils from "node_modules/sciter-utils/src/utils.js";

// capture unhandled exceptions
Logger.capture();

// initialize logger
Logger.init();

// attach logger to console
Logger.attach();

document.on("ready", function(event, element) {
    // ignore iframe ready event
    if (element.parentElement)
        return;

    // redirect logger output to plaintext
    Logger.plaintext(document.$("plaintext#logger"));

    // log sciter version
    console.debug(Utils.sciterInfo());

    // add support for F5 reload
    Utils.addReloadWindow();

    // close window on escape key press
    Utils.closeWindowOnEscape(Window.this);

    // center window on screen
    Utils.centerWindow(Window.this, "screen");

    // bring window to front and set input focus
    Window.this.activate(true);

    console.debug(isStrict() ? "strict js" : "loose js");

    console.debug("Document ready - OK");
});

document.on("input", "form#config", function(event_, form) {
    // set document light/dark mode
    document.attributes["theme"] = form.value.mode;

    // get frame
    const frame = document.$("frame");

    // set frame theme
    frame.attributes["content-style"] = form.value.theme;

    const url = frame.frame.document.url();

    console.debug(url);

    // reload frame
    frame.frame.loadFile(url);

    // set frame theme UI size
    frame.frame.document.attributes["ui-size"] = form.value.size;
});

/**
 * Test if strict javascript is used
 * @returns {boolean} true if strict, false otherwise
 * @note https://stackoverflow.com/a/18916788/10126479
 */
function isStrict() {
    return eval("var __temp = null"), (typeof __temp === "undefined");
}

</script>
</head>
<include src="window.htm" media="sciter" />
<body>
    <p> This is a sciter demo app based on multiple examples. </p>
    <form #config .hbox>
        <div .hbox>
            Theme:
            <select|dropdown(theme)>
                <option value="default" value="css/themes/default-unisex.css" selected>default</option>
                <option value="flat" value="css/themes/windows-flat.css">Windows Flat</option>
                <option value="material" value="css/themes/android-material.css">Android/Material</option>
            </select>
        </div>
        <div .hbox>
            Mode:
            <button|radio(mode) checked value="light">Light</button>
            <button|radio(mode) value="dark">Dark</button>
        </div>
        <div .hbox>
            Size:
            <button|radio(size) checked value="normal">Normal</button>
            <button|radio(size) value="compact">Compact</button>
        </div>
    </form>

    <frame src="elements.htm" content-style="css/themes/default-unisex.css" />

    <plaintext #logger readonly />
</body>
</html>
